<template>
  <div class="feeds" v-dom="'list'">

    <template v-for="feed in feeds">
      <feed :feed="feed" v-if="!type||type==1" :user-info="userInfo"></feed>
      <product :product="feed" v-else="type == 2" :user-info="userInfo"></product>
    </template>
  </div>
  <div class="load-more-tips">
    {{finish?'没有更多了':'加载中...'}}
  </div>
</template>

<script type="text/babel">
  import Feed from './Feed.vue';
  import Product from './Product.vue';

  export default{
    props: ['feeds', 'userInfo', 'canMore', 'type', 'finish'],//type:0:feed, 2:product
    components: {
      Feed, Product
    },

    attached(){
      this.height = this.doms.list.scrollHeight;

      wsdk.setOnScroll((x, y)=> {
        if (!this.finish && this.canMore && document.body.scrollHeight - ( y + window.screen.height) < 30) {
          this.canMore = false;

          this.$dispatch('load-more', (finish)=> {
            this.finish = finish;
            this.canMore = true
          });
        }
      })
    },

    detached: function () {
      console.log('detached');
    },

    methods: {}
  }
</script>

<style scoped>
  .load-more-tips {
    color: #969696;
    text-align: center;
  }
</style>
